<script lang="ts" setup>
import dayjs from 'dayjs'
import mcht from '@/api/mcht'
import { useAppStore } from '@/store'

const {
  windowHeight,
  customBarHeight,
  statusBarHeight
} = storeToRefs(useAppStore())

interface Option {
  text: string
  value: string
}

onLoad((options: any) => {
  if (options.date) {
    form.value.sysDate = dayjs(options.date).format('YYYYMMDD')
  }
  if (options.mchtNo) {
    form.value.mchtNo = options.mchtNo
  }
  if (options.shopId) {
    form.value.shopId = options.shopId
  }
  if (options.self) {
    form.value.self = options.self
  }
})

const showQuery = ref(false)
const form = ref({
  mchtNo: '',
  shopId: '',
  sysDate: dayjs().format('YYYYMMDD'),
  sysSeqNum: '',
  temId: '',
  channelType: '',
  self: '0'
})
const channelTypeOptions = ref<Option[]>([
  { text: '银行卡', value: 'CD' },
  { text: '微信', value: 'WX' },
  { text: '支付宝', value: 'AL' },
  { text: '云闪付', value: 'UN' },
  { text: '绵商支付', value: 'MS' },
])

const total = ref(0)
const page = ref(1)
const pageSize = ref(5)
const loading = ref<boolean>(false)
const end = ref<boolean>(false)
const orderList = ref([])

function query () {
  showQuery.value = false
  orderList.value = []
  end.value = false
  getList(1)
}

async function getList (p: number) {
  const newForm = JSON.parse(JSON.stringify(form.value))
  loading.value = true
  isLoading.value = false
  const { data } = await mcht.getStatement(Object.assign(newForm, {
    pageNum: p,
    pageSize: pageSize.value,
    sysDate: form.value.sysDate
  }))
  loading.value = false
  isLoading.value = true
  if (data.status === 'success') {
    total.value = data.data.total
    page.value = data.data.pageNum
    orderList.value = orderList.value.concat(data.data.orders)
    if (page.value * pageSize.value >= total.value) {
      end.value = true
    } else {
      end.value = false
    }
  }
}
const queryForm = ref()
function reset () {
  form.value.sysSeqNum = ''
  form.value.temId = ''
  form.value.channelType = ''
}

const isLoading = ref<boolean>(true)
function scrolltolower() {
  if (!end.value) {
    if (isLoading.value) {
      getList(page.value + 1)
    }
  }
}

function clickQuery () {
  showQuery.value = true
}

onMounted(() => {
  getList(1)
})

function copyCode (data) {
  uni.setClipboardData({
    data,
    success: function () {
      uni.showToast({
        icon: 'none',
        title: '内容已复制'
      })
    }
  })
}

function masktring(str) {
  if (str.length <= 24) {
    return str
  }
  let start = str.slice(0, 12)
  let end = str.slice(-12)
  return start + ' **** ' + end
}
</script>

<template>
  <div class="navbar" :style="{marginTop: statusBarHeight + 'px' }">
    <nut-navbar title="对账明细" left-show @click-back="clickQuery">
      <template #left>
        <nut-icon name="search"></nut-icon>
      </template>
    </nut-navbar>
  </div>
  <div class="detail">
    <div class="list">
      <nut-empty v-if="orderList.length === 0" description="暂无数据"></nut-empty>
      <scroll-view v-else scroll-y :style="{ height: windowHeight - customBarHeight - 40 + 'px' }"
        @scrolltolower="scrolltolower">
        <div class="item" v-for="(item, index) in orderList" :key="index">
          <div class="top dt-p1">
            <div class="num">{{ item.sysSeqNum }}</div>
            <nut-button size="mini" @click="copyCode(item.sysSeqNum)">
              <template #icon>
                <!-- <nut-icon name="order" /> -->
                <div class="i-ri:file-copy-fill p1" style="font-size: 34rpx;"></div>
              </template>
            </nut-button>
          </div>
          <div class="content">
            <div class="line">
              <div class="key">商户号</div>
              <div class="value">{{ item.mchtNo }}</div>
            </div>
            <div class="line">
              <div class="key">商户名称</div>
              <div class="value">{{ item.mchtNm }}</div>
            </div>
            <div class="line">
              <div class="key">门店号</div>
              <div class="value">{{ item.shopId }}</div>
            </div>
            <div class="line">
              <div class="key">门店名称</div>
              <div class="value">{{ item.shopName }}</div>
            </div>
            <div class="line">
              <div class="key">交易日期</div>
              <div class="value">{{ item.sysDate }}</div>
            </div>
            <div class="line">
              <div class="key">交易时间</div>
              <div class="value">{{ item.sysTime }}</div>
            </div>
            <div class="line">
              <div class="key">交易类型</div>
              <div class="value">{{ item.txnDesc }}</div>
            </div>
            <div class="line">
              <div class="key">交易金额</div>
              <div class="value" v-if="item.transAmt"><nut-price :price="item.transAmt" symbol="¥"
                  custom-style="color: #000" /></div>
            </div>
            <div class="line">
              <div class="key">交易手续费</div>
              <div class="value">
                <nut-price v-if="item.feeAmt" :price="item.feeAmt" symbol="¥" custom-style="color: #000" />
                <nut-price v-else :price="0" symbol="¥" custom-style="color: #000" />
              </div>
            </div>
            <div class="line">
              <div class="key">原交易流水号</div>
              <div class="value" style="text-align: right;">{{ item.origSysSeqNum }}</div>
            </div>
          </div>
        </div>
        <div class="end" v-if="end">没有更多数据了</div>
        <div class="loading" v-if="loading">
          <nut-icon name="loading"></nut-icon>
          数据加载中...
        </div>
      </scroll-view>
    </div>
    <nut-popup v-model:visible="showQuery" position="bottom" closeable round
      :custom-style="{ height: '460rpx', paddingTop: '60rpx' }">
      <nut-form ref="queryForm">
        <nut-form-item label="系统流水号" custom-class="li-cell-box">
          <nut-input v-model="form.sysSeqNum" class="nut-input-text" placeholder="请输入系统流水号" type="text"
            input-align="right" />
        </nut-form-item>
        <nut-form-item label="终端号" custom-class="li-cell-box">
          <nut-input v-model="form.temId" class="nut-input-text" placeholder="请输入终端号" type="text" input-align="right" />
        </nut-form-item>
        <nut-form-item label="渠道类型" custom-class="li-cell-box">
          <option-select v-model="form.channelType" title="渠道类型" :options="channelTypeOptions" inputAlign="right" />
        </nut-form-item>
        <nut-cell custom-class="li-cell-bot">
          <div class="li-cell-bot-cz shake_o" @click="reset">重置</div>
          <div class="li-cell-bot-qr shake_o" @click="query">查询</div>
        </nut-cell>
      </nut-form>
    </nut-popup>
  </div>
</template>

<route lang="json">
{
  "layout": "home",
  "style": {
    "backgroundColorContent": "#f1f1f1",
    "navigationStyle": "custom"
  }
}
</route>

<style lang="sass" scoped>
.detail
  .query
    display: flex
    justify-content: space-between
    padding: 0 10px
  .list
    padding: 10px
    .item
      border-radius: 6px
      background-color: #fff
      margin-bottom: 10px
      .top
        border-bottom: 1px solid #e8e8e8
        padding: 12px 10px
        display: flex
        align-items: center
        justify-content: space-between
        .num
          font-size: 24rpx
          width: calc( 95% - 40px )
          word-break: break-all
      .content
        padding: 10px
      
        .line
          display: flex
          justify-content: space-between
          .key
            color: #8e8e8e
            min-width: 100px
            margin-right: 20px
          .value
            word-break: break-all
    .end
      text-align: center
      color: #8e8e8e
    .loading
      text-align: center
      color: #8e8e8e
:deep(.nut-cell__title)
  flex: 2
:deep(.nut-button--default)
  border: none
:deep(.nut-icon-search)
  margin-left: 15rpx
</style>
